<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>七夕脱单倒计时</title>
		<script src="{:config('public.static')}/home/js/base.js"></script>
		<link rel="stylesheet" type="text/css" href="{:config('public.static')}/home/css/base.css" />
		<style type="text/css">
			.generate {
				width: 6.3rem;
				position: absolute;
				top: 25%;
				left: 0.6rem;
				text-align: center;
				color: #ee7185;
			}
			.title {
				font-size: 0.72rem;
				color: #223f56;
				margin-bottom: 0.2rem;
				font-family: 'Lantinghei SC';
			}
			.fix {
				color: #ef8182;
				font-size: 0.68rem;
				font-family: 'Lantinghei SC';
			}
			.day {
				color: #f68374;
				font-size: 0.62rem;
				margin: 0.2rem 0 0.3rem;
				font-family: 'FZZongYi-M05S';
				font-weight: bolder;
			}
			.additional {
				font-size: 0.48rem;
				color: #223f56;
				font-family: 'Lantinghei SC';
			}
			.share_popup,.welcome {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: -1;
			}
			/*.welcome {
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				width: 100%;
				height: 100%;
			}*/
		</style>
	</head>
	<body>
	<div class="share_popup" id="html2canvas">
		<div class="main">
			<div class="welcome">
				<img id="logo" src="{:config('public.static')}/home/img/shengcheng.jpg" style="width: 100%;height:100%">
			</div>
		</div>
		<div class="generate">
			<p class="title" id="title"></p>
			<p class="fix">距离结束单身还有</p>
			<div class="generateZ">
				<div class="generateList" id="p1">
					<p class="day">二百零六天</p>
					<p class="additional">大约在冬季</p>
				</div>
				<div class="generateList" id="p2">
					<p class="day">一千年</p>
					<p class="additional">脱单是不可能了，这辈子都不可能脱单的</p>
				</div>
				<div class="generateList" id="p3">
					<p class="day">四年六个月零十二天</p>
					<p class="additional">你的一意中人是个盖世单身狗，他会踩着七彩祥云来娶你“狗”命</p>
				</div>
				<div class="generateList" id="p4">
					<p class="day">三年零六个月</p>
					<p class="additional">连单身狗是什么都不知道能不孤独终老吗</p>
				</div>

				<div class="generateList" id="p5">
					<p class="day">三天</p>
					<p class="additional">现在就去表白，争取了才会获得想要的爱情</p>
				</div>
				<div class="generateList" id="p6">
					<p class="day">两年三个月零二十一天</p>
					<p class="additional">大约还要再等几个春夏秋冬</p>
				</div>
				<div class="generateList" id="p7">
					<p class="day">两年零八个月</p>
					<p class="additional">你会在对的时间遇到对的人</p>
				</div>
				<div class="generateList" id="p8">
					<p class="day">一个星期</p>
					<p class="additional">爱情的大门已经为你打开了，对的人很快就会出现</p>
				</div>
				<div class="generateList" id="p9">
					<p class="day">三个月</p>
					<p class="additional">等时机一到，爱情之花也即将开放</p>
				</div>
				<div class="generateList" id="p10">
					<p class="day">一百年</p>
					<p class="additional">掐指一算，注定孤独终老</p>
				</div>
				<div class="generateList" id="p11">
					<p class="day">N年</p>
					<p class="additional">为什么单身，难道你自己心里没点bi数吗</p>
				</div>
				<div class="generateList" id="p12">
					<p class="day">五年一个月零十天</p>
					<p class="additional">取决于你，什么时候变得温柔</p>
				</div>
				<div class="generateList" id="p13">
					<p class="day">一辈子</p>
					<p class="additional">下辈子吧，看看这辈子的造化！</p>
				</div>
				<div class="generateList" id="p14">
					<p class="day">五分钟</p>
					<p class="additional">出门，右转，前方500米处，遇见</p>
				</div>
				<div class="generateList" id="p15">
					<p class="day">X天</p>
					<p class="additional">下次流星划过夜空之时，便是你的花期</p>
				</div>
				<div class="generateList" id="p16">
					<p class="day">一万年</p>
					<p class="additional">当山峰没有棱角的时候，当河水不再流</p>
				</div>

			</div>
		</div>
	</div>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script src="{:config('public.static')}/home/js/html2canvas.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#p1, #p2, #p3,#p4, #p5, #p6,#p7, #p8, #p9,#p10, #p11, #p12,#p13, #p14, #p15, #p16').hide();
		second = new Date().getSeconds();
		if((second % 16) == 0) $('#p1').show();
		if((second % 16) == 1) $('#p2').show();
		if((second % 16) == 2) $('#p3').show();
		if((second % 16) == 3) $('#p4').show();
		if((second % 16) == 4) $('#p5').show();
		if((second % 16) == 5) $('#p6').show();
		if((second % 16) == 6) $('#p7').show();
		if((second % 16) == 7) $('#p8').show();
		if((second % 16) == 8) $('#p9').show();
		if((second % 16) == 9) $('#p10').show();
		if((second % 16) == 10) $('#p11').show();
		if((second % 16) == 11) $('#p12').show();
		if((second % 16) == 12) $('#p13').show();
		if((second % 16) == 13) $('#p14').show();
		if((second % 16) == 14) $('#p15').show();
		if((second % 16) == 15) $('#p16').show();

	});
	$(".title").text(sessionStorage["par1"])
    $(document).ready(function() {
        var str = $('#html2canvas');
        html2canvas([str.get(0)], {
            onrendered: function(canvas) {
                var image = canvas.toDataURL("image/png");
                var pHtml = "<img src=" + image + " style='width:100%;height:100%;'/>";
                $('#html2canvas').html(pHtml);
            }
        });
    })
	</script>
	</body>
</html>